<%--
  Created by IntelliJ IDEA.
  User: 11076
  Date: 2018/11/22
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <%--<base href="<%=basePath%>">--%>
    <title>Title</title>
    <%--<link rel="stylesheet" href="static/dataTable/css/bootstrap.min.css" />--%>
    <%--<link rel="stylesheet" href="static/dataTable/css/dataTables.bootstrap.css" />--%>

    <%--<script type="text/javascript" src="static/dataTable/js/jquery-3.3.1.min.js"></script>--%>
    <%--<script type="text/javascript" src="static/dataTable/js/bootstrap.min.js"></script>--%>
    <%--<script type="text/javascript" src="static/dataTable/js/jquery.dataTables.js"></script>--%>
    <%--<script type="text/javascript" src="static/dataTable/js/dataTables.bootstrap.js"></script>--%>

    <%--&lt;%&ndash;弹出框&ndash;%&gt;--%>
    <%--<link type="text/css" rel="stylesheet" href="plugins/attention/drag/style.css">--%>
    <%--<script type="text/javascript" src="plugins/attention/drag/drag.js"></script>--%>
    <%--<script type="text/javascript" src="plugins/attention/drag/dialog.js"></script>--%>
    <%@ include file="../base/top.jsp" %>
        <link rel="stylesheet" href="static/css/common/steps.css" />

    <style>
        #result_admin{
            width: 90%;
            margin: auto;
            margin-top: 20px;
            padding: 20px;
            box-shadow: 0px 0px 3px #888888 ;
            border-radius: 5px;
            background-color: #FFFFFF;
        }
        .modal-dialog{
            z-index: 9999;
        }

          .steps {
              list-style: none;
              display: table;
              width: 80%;
              padding: 0;
              margin: 0;
              margin: auto;
              position: relative;
          }
        .steps li {
            display: table-cell;
            text-align: center;
            width: 1%;
        }
        .steps li .step {
            border: 2px solid #ced1d6;/*灰色*/
            color: #546474;/*深灰色*/
            font-size: 15px;
            border-radius: 100%;
            background-color: #FFF;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 10px;
            text-align: center;
        }
        .steps li:before {
            display: block;
            content: "";
            width: 100%;
            height: 1px;
            font-size: 0;
            overflow: hidden;
            border-top: 3px solid #CED1D6;
            position: relative;
            top: 12px;
            z-index: 1;
        }
        .steps li.last-child:before {
            max-width: 50%;
            width: 50%;
        }
        .steps li:last-child:before {
            max-width: 50%;
            width: 50%;
        }
        .steps li:first-child:before {
            max-width: 51%;
            left: 50%;
        }
        .steps li.active:before,
        .steps li.active .step {
            border-color: #5293c4;
        }
        .steps li .title {
            display: block;
            margin-top: 2px;
            max-width: 100%;
            color: #949ea7;
            font-size: 12px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            word-wrap: break-word;
        }
        .steps li.active .title {
            color: #2b3d53;
        }
    </style>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="hr hr-18 dotted hr-double"></div>
                <div class="row">
                    <div class="col-xs-12">
                        <%--datatable--%>
                        <div id="result_admin">
                            <button class="btn btn-primary" id="insert-label" onclick="addStageChain()">添加</button>
                            <table id="data-table" width="80%" style="margin-left: 10%" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>
                                        全选<input type="checkbox" id="check-all"/>
                                    </th>
                                    <th>序号</th>
                                    <th>阶段链</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<%@ include file="../base/foot.jsp" %>
<script type="text/javascript" src="static/js/common/steps.js"></script>
<script>
    var table = null;
    var columnsData =  [
        {
            bSortable : false,
            className : "text-left",
            width : "50px",
            render : function(data, type, row, meta) {
                return "<input type=\"checkbox\"/>";
            }
         },
        {
            bSortable : false,
            data: null,
            width : "40px",
            className: 'text-center whiteSpace',
            render:function(data,type,row,meta) {
                return meta.row + 1 +
                    meta.settings._iDisplayStart;
            }
        },
        {
            'data': 'stageInfoList',
            bSortable : false,
            render:function(data,type,row,meta) {
                var html="";
                // html += "<ul class=\"steps\">";
                // if(data!=null && data.length>0){
                //     for(var i = 0;i<data.length;i++){
                //       html+=    " <li data-step=\"1\" class=\"active\">\n" +
                //                 "      <span class=\"step\"></span>\n" +
                //                 "      <span class=\"title\">"+data[i].stageName+"</span>\n" +
                //                 "</li>";
                //     }
                // }
                // html += "</ul>";
                html+=getStepsBar(data,"stageName",new Array("stageId","stagePreId"),null);
                return html;
            }
        },
        {
            bSortable : false,
            className : "text-center",
            width : "100px",
            render : function(data, type, row, meta) {
                var id = '"' + row.id + '"';
                var html = "";
                html += "<a href='javascript:void(0);' onclick='editStageChain(this)' class='up btn btn-primary btn-xs'><i class='fa fa-arrow-up'></i> Edit</a> &nbsp;";
                html += "<a href='javascript:void(0);'   onclick='deleteStageChain(this)'  class='down btn btn-danger btn-xs'><i class='fa fa-arrow-down'></i> Delete</a>";
                return html;
            }
        }
    ];
    var dataBaseFiled =  [
        {'column2': 'pk_label_id'},
        {'column3': 'labelName'}
    ];
    var url='stage/getList';
    var paramter = {test:"name2"};
    $(document).ready(function() {
        table = $('#data-table').DataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION,{

            columns:columnsData,
            // ajax: {
            //     type: 'post',
            //     url: 'label/getList'
            // }
            ajax: function (data,callback) {
                ajax(data,callback,null,url,null);
            },
            order:[[ 2, "asc" ]]
        }));
    });

    function addStageChain() {
        var diag = new top.Dialog();
        diag.Drag=true;
        diag.Title ="添加";
        diag.URL = "<%=basePath%>stage/toAdd";
        diag.Width = 550;
        diag.Height = 368;
        diag.CancelEvent = function(){ //关闭事件
            var success = diag.innerFrame.contentWindow.document.getElementById('success').value;
            var msg = diag.innerFrame.contentWindow.document.getElementById('msg').value;
            diag.close();
            if("true" == success){
                operateSuccess(msg);
            }else if("false"==success){
                operateError(msg);
            }
        };
        diag.show();

    }
    function editStageChain(button) {
        var json =  getClickedRowValue(button);
        var diag = new top.Dialog();
        diag.Drag=true;
        diag.Title ="编辑";
        diag.URL = '<%=basePath%>stage/toEdit?firstStageId='+json['firstStageId'].replace(/\s+/g,"");
        diag.Width = 550;
        diag.Height = 368;
        diag.CancelEvent = function(){ //关闭事件
            var success = diag.innerFrame.contentWindow.document.getElementById('success').value;
            var msg = diag.innerFrame.contentWindow.document.getElementById('msg').value;
            diag.close();
            if("true" == success){
                operateSuccess(msg);
            }else if("false"==success){
                operateError(msg);
            }
        };
        diag.show();

    }

    function deleteStageChain(button) {
        var json =getClickedRowValue(button);
        bootbox.confirm("确定要删除吗?", function(result) {
            if(result) {
                $.post("<%=basePath%>stage/drop",
                    {labelId:json['labelId'].replace(/\s+/g,"")},
                    function(data){
                        if(data["success"]==true){
                            operateSuccess(data["msg"]);
                        }else if(data["success"]==false){
                            operateError(data["msg"]);
                        }
                    }
                );

            }
        });
    }


    $("#testUrl").click(function () {
        top.addTab('113','113','TEST','<%= basePath%>label_lib/list',{
            'test': 1,
            'test2': 2
        })
    })

</script>

</body>
</html>
